<template>
  <div id="home">
    <Navbar>
      <h4 slot="center" class="title">个人中心</h4>
    </Navbar>
    <div class="top">
      <van-icon name="manager-o" size="50px" />
      <div class="login">登录/注册</div>
    </div>
    <div class="count">
      <div>
        <span class="num">0.00</span>元
        <div>我的余额</div>
      </div>
      <div>
        <span class="num">0</span>个
        <div>我的优惠</div>
      </div>
      <div>
        <span class="num">0</span>分
        <div>我的积分</div>
      </div>
    </div>
    <div class="middle">
      <div class="middle-item">
        <van-icon name="comment-circle" size="18px" />
        <span class="text">我的消息</span>
      </div>
      <div class="middle-item">
        <van-icon name="diamond" size="18px" />
        <span class="text">积分商店</span>
      </div>
      <div class="middle-item">
        <van-icon name="vip-card-o" size="18px" />
        <span class="text">会员卡</span>
      </div>
    </div>
    <div class="end">
      <div class="end-item" @click="toCart">
        <van-icon name="cart" size="18px"/>
        <span class="text">我的购物车</span>
      </div>
      <div class="end-item">
        <van-icon name="like" size="18px"/>
        <span class="text">下载购物app</span>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon } from "vant";

Vue.use(Icon);
import Navbar from "@/components/navbar";

export default {
  name: "",
  components: {
    Navbar,
  },
  methods: {
    toCart() {
      this.$router.push('/cart');
    }
  },
};
</script>
<style scoped>
.title {
  color: #fff;
}

.top {
  display: flex;
  align-items: center;
  padding: 45px;
  width: 100%;
  height: 50px;
  background-color: #ff8198;
  color: #fff;
}

.top .login {
  margin-left: 15px;
}

.count {
  color: #666;
  font-size: 13px;
  display: flex;
  width: 100%;
  height: 80px;
  justify-content: space-evenly;
  align-items: center;
  border-bottom: #f2f2f2 solid 5px;
  text-align: center;
}

.count .num {
  color: #ff5f3e;
  font-size: 24px;
  font-weight: 700;
}

.middle {
  width: 100%;
  height: 150px;
}

.middle .middle-item {
  height: 50px;
  padding: 15px;
  border-bottom: 2px solid #f8f8f8;
}

.middle .middle-item .text {
  font-size: 14px;
  margin-left: 10px;
  position: absolute;
}

.end {
  border-top: #f2f2f2 solid 5px;
  width: 100%;
  height: 100px;
}

.end .end-item {
  height: 50px;
  padding: 15px;
  border-bottom: 2px solid #f8f8f8;
}

.end .end-item .text {
  font-size: 14px;
  margin-left: 10px;
  position: absolute;
}
</style>